<div id="money-options" style="width: 100%"></div>
<template type="text/html" id="money-options-tpl">
    <div>
        <n-table class="table" >
            <n-thead>
                <n-tr>
                    <n-th>城市地区</n-th>
                    <n-th>赠送金额</n-th>
                    <n-th>操作</n-th>
                </n-tr>
            </n-thead>
            <n-tbody>
                <template v-for="(select,index) in selects" v-if="selects.length">
                <n-tr>
                    <n-td >
                        <n-cascader
                            v-model:value="select.city"
                            placeholder="请选择区域"
                            expand-trigger="hover"
                            :options="cityList"
                            :multiple="true"
                            check-strategy="all"
                            max-tag-count="responsive"
                            :filterable="true"
                            :show-path="true"
                            value-field="id"
                            label-field="name"
                            style="width: 400px"
                            @update:show="onShow(index)"
                        ></n-cascader>
                    </n-td>
                    <n-td>
                        <n-input-number v-model:value="select.price" :precision="2" button-placement="both" style="width: 150px"></n-input-number>
                    </n-td>
                    <n-td>
                        <n-button size="small" type="error" dashed @click="handleDelete(index)" >
                            <template #icon>
                                <i class="n-icon feather icon-trash"></i>
                            </template>
                        </n-button>
                    </n-td>
                </n-tr>
                </template>
            </n-tbody>
        </n-table>
        <n-button size="small" type="primary" dashed @click="onCreate" >
            <template #icon>
                <i class="n-icon feather icon-plus"></i>
            </template>
            添加
        </n-button>
        <input type="hidden" name="rule" :value="options">
    </div>
</template>

<script>
    Dcat.ready(function () {

        window.appInit('#money-options',{
            template: "#money-options-tpl",
            setup(){
                const selectIndex = Vue.ref(0)
                const cityList = Vue.ref(@json($cityList));
                const selects = Vue.ref(@json($options));
                console.log(selects)
                const onCreate = ()=>{
                   const select = {
                       city: [],
                       price: 0.00,
                   }
                   Vue.unref(selects)?.push(select)
                }
                const handleDelete = (index)=>{
                   Vue.unref(selects)?.splice(index,1)
                }
                Vue.watch(()=>selects.value,()=>{
                   console.log(Vue.unref(selects))
                })
                const options = Vue.computed(()=> JSON.stringify(Vue.unref(selects)))
                const handleDisable = (list = [], city = [])=>{
                    return list?.map(item=>{
                        if(city.length>0){
                            if(city.findIndex(index=>index===item.id)!==-1){
                                item.disabled = true;
                            }else{
                                item.disabled = false;
                            }
                        }else{
                            item.disabled = false;
                        }
                        if(item.children&&item.children.length){
                            item.children = handleDisable(item.children, city)
                            item.disabled = item.children.length === item.children.filter(child=>child.disabled).length
                        }
                        return item;
                    })
                }
                const getCityList = (index)=>{
                    let city = [];
                    Vue.unref(selects)?.filter((item,key)=> key!==index)?.forEach(item=>{
                        item.city.forEach(x=>city.push(x))
                    })
                    return handleDisable(cityList.value,city)
                }
                const onShow = (index)=>{
                    cityList.value = getCityList(index)
                    selectIndex.value = index
                }
               return {
                   cityList,
                   selects,
                   onCreate,
                   handleDelete,
                   onShow,
                   options
               }
            }
        })
    })
</script>
